<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sample Map Search</title>

<link href="css/mapsearch.css" type="text/css" rel="stylesheet">

<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
	var map;
	var profileMarkers = [];
	
	function clearMarkers() {
		if (profileMarkers) {
		    for (i in profileMarkers) {
		    	profileMarkers[i].setMap(null);
		    }
		}
	}
	function initialize() {
		var newyorkLocation = new google.maps.LatLng(40.708, -73.99);
		var mapOptions = {
			streetViewControl : false,
			zoom : 15,
			center : newyorkLocation,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById('map'), mapOptions);
		
		$('#searchsubmit').bind('click', function(){
				clearMarkers();
				$.getJSON('rest/samples', addResults);
		});
	}

	
	function showInContentWindow(text) {
		alert(text);
	}
	
	function addResults(json) {
		if (json.results && json.results.length) {
			for (var i = 0, placemark; placemark = json.results[i]; i++) {
				var pos = new google.maps.LatLng(parseFloat(placemark.point.latitude, 10),
			            parseFloat(placemark.point.longitude, 10));
				var marker = new google.maps.Marker({
			          map: map,
			          title : placemark.name,
			          position: pos
			     	});
				
				attachEvent(marker);			
				
			    profileMarkers.push(marker);			   			    
			}
		}		
	}
	
	
	function attachEvent(marker){
		google.maps.event.addListener(marker, 'click', function(){
			var text = marker.getTitle();
			showInContentWindow(text);
		});	
	}
	
	
	
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="search">
		<form class="form">
			<div class="search-wrapper">
				<div class="search-inputs-wrapper">
					<ul class="search-inputs">
						<li>
							<div>
								<label>Location</label>
								<select>
									<option value="1">USA</option>
									<option value="2">Europe</option>
									<option value="3">Asia</option>
								</select>
							</div>
						</li>
						 
						<li>
							<div>
								<label>Sample</label> 
								<select>
									<option value="1">Water</option>
									<option value="2">Soil</option>
								</select>
							</div>
						</li>
						
						<li>
							<div>
								<label>Expert</label>
								<select>
									<option value="0">All</option>
									<option value="1">Expert 1</option>
									<option value="2">Expert 2</option>
								</select>
							</div>
						</li>
					</ul>
				</div>
				<button id="searchsubmit" type="button" class="btn">Search</button>
			</div>
		</form>
	</div>
	
	<div id="map-wrapper">
		<div id="map"></div>
	</div>

</body>
</html>
